import React, { useState, useRef } from 'react';
import style from './index.module.css';
import ReactECharts from 'echarts-for-react';
import { Button, Empty, Typography } from 'antd';

const NestedTabs = () => {
  const [activeTab, setActiveTab] = useState('1');
  const [nestedActiveTab, setNestedActiveTab] = useState('1');
  //未来7天的日期
  function getNextSevenDays() {
    const today = new Date();
    const dateArray = [];
    for (let i = 0; i < 7; i++) {
      // 创建日期对象
      const nextDate = new Date(today);
      nextDate.setDate(today.getDate() + i);

      // 格式化日期为字符串（YYYY-MM-DD）
      const formattedDate = `${(nextDate.getMonth() + 1).toString().padStart(2, '0')}-${nextDate.getDate().toString().padStart(2, '0')}`;
      dateArray.push(formattedDate);
    }
    return dateArray;
  }
  const sevenDay = getNextSevenDays();
  const fistDay = sevenDay[0]
  const lastDay = sevenDay[6]
  // 左边的
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '作品数量',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 11, name: '视频' },
          { value: 22, name: 'H5' },
          { value: 33, name: '海报' },
          { value: 33, name: '表单' },
          { value: 22, name: '长页' },
          { value: 11, name: '互动' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  // 右边的
  const option1 = {
    title: {
      text: '数据分析',
      left: "30px",
      top: "20px"
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      bottom: '5%',
      left: 'center',
      icon: "circle"
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '10%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: sevenDay
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '新增总表单（份）',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [7, 6, 5, 4, 3, 2, 1]
      },
      {
        name: '新增被浏览（次）',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [1, 2, 3, 4, 5, 6, 7]
      }
    ]
  };
  const tabs = [
    {
      key: '1', label: '作品数据', content: (
        <div className={style.ZuoPin}>
          <div className={style.ZuoPinLeft}>
            <h2 style={{ margin: "10px" }}>活跃周报 <span className={style.ZuoPinLeftspan}>{fistDay}-{lastDay}</span> <Button style={{ float: "right" }} type="primary">去制作</Button></h2>
            <div style={{ display: "flex" }}>
              <div className={style.qiuBox}>
                <div>
                  <span className={style.qiu}>0</span>
                  <p>下载作品</p>
                  <p>周对比 <b>0</b></p>
                </div>
                <div>
                  <span className={style.qiu}>10</span>
                  <p>创建作品</p>
                  <p>周对比 <b>+10</b></p>
                </div>
                <div>
                  <span className={style.qiu}>8</span>
                  <p>积分获取</p>
                  <p>周对比 <b>+8</b></p>
                </div>
              </div>
              <ReactECharts option={option} className={style.zuoBing} />
            </div>

          </div>
          <div className={style.ZuoPinRight}>
            <ReactECharts option={option1} className={style.youShu} />
          </div>
        </div>
      )
    },
    { key: '2', label: '分发数据', nested: true },
  ];

  const nestedTabs = [
    {
      key: '1', label: '我发起的', content: (
        <Empty
          image="https://www.eqxiu.com/workbench/img/empty.143a1468.png"
          imageStyle={{ height: 150 }}
          description={
            <Typography.Text>
              当前暂无团队，快去创建吧
            </Typography.Text>
          }
        >
          <Button type="primary">创建团队</Button>
        </Empty>
      )
    },
    {
      key: '2', label: '我参与的', content: (
        <Empty
          image="https://www.eqxiu.com/workbench/img/empty.143a1468.png"
          imageStyle={{ height: 150 }}
          description={
            <Typography.Text>
              还没有参与作品分发
            </Typography.Text>
          }
        >

        </Empty>
      )
    },
  ];

  return (
    <div className={style.box}>
      <div style={{ display: "flex" }}>
        <h1 style={{ margin: '20px' }}>我的数据</h1>
        <div className={style.tabs}>
          {tabs.map(tab => (
            <button
              key={tab.key}
              className={activeTab === tab.key ? style.active : ''}
              onClick={() => {
                setActiveTab(tab.key);
                setNestedActiveTab('1');
              }}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>
      <div className={style.content}>
        {tabs.map(tab => {
          if (tab.key === activeTab) {
            if (tab.nested) {
              return (
                <div key={tab.key}>
                  <div className={style.nestedTabs}>
                    {nestedTabs.map(nestedTab => (
                      <button
                        key={nestedTab.key}
                        className={`${nestedActiveTab === nestedTab.key ? style.active : ''} ${nestedActiveTab === nestedTab.key ? style.nestedActive : ''}`}
                        onClick={() => setNestedActiveTab(nestedTab.key)}
                      >
                        {nestedTab.label}
                      </button>
                    ))}
                  </div>
                  <div className={style.nestedContent}>
                    {nestedTabs.find(nestedTab => nestedTab.key === nestedActiveTab)?.content}
                  </div>
                </div>
              );
            }
            return <div key={tab.key}>{tab.content}</div>;
          }
          return null;
        })}
      </div>
    </div>
  );
};

export default NestedTabs;
